<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue</title>
  </head>
  <link rel="stylesheet" type="text/css" href="./style.css" />
  <script src="../vue-2.6.11.js"></script>
  <body>
    <!-- 模板 -->

    <div id="app">
      <h2>自定义的下拉框</h2>

      <div style="float:left;">
        <custom-select btn-value="查询"></custom-select>
      </div>

      <div style="float:left;">
        <custom-select btn-value="搜索"></custom-select>
      </div>
    </div>

    <script>
      //全局注册
      Vue.component('custom-select', {
        // 组件中的data必须是函数
        data: function() {
          return {
            selectShow: false
          }
        },

        props: ['btnValue'],

        template: `<section class="warp">
						<div class="searchIpt clearFix">
							<div class="clearFix">
								<input type="text" class="keyWord" value="" @click="selectShow=!selectShow"/>

								<input type="button" :value="btnValue">
								<span></span>
							</div>
							<custom-list v-show='selectShow'></custom-list>
						</div>
					</section>`
      })
      //子组件
      Vue.component('custom-list', {
        template: `<ul class="list">
								<li>html+css</li>
								<li>html5+css3</li>
								<li>javascript</li>
								<li>angular</li>
								<li>react</li>
								<li>vue</li>
								<li>jquery</li>
								<li>nodejs</li>
							</ul>`
      })

      //vm实例
      var vm = new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>
